<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>飞牛桌面管理 - 个性化定制</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="fonts/font-awesome.min.css" rel="stylesheet">
    <style>
        /* 深色科技风格颜色变量 */
        :root {
            --primary: #00a8ff;
            --secondary: #00d2d3;
            --accent: #5f27cd;
            --success: #10ac84;
            --danger: #ee5a24;
            --warning: #feca57;
            --info: #3498db;
            --dark-bg: #0f172a;
            --card-bg: #1e293b;
            --card-hover: #273449;
            --border-color: #334155;
            --text-primary: #e2e8f0;
            --text-secondary: #94a3b8;
            --shadow-color: rgba(0, 0, 0, 0.3);
            --glow-primary: 0 0 10px rgba(0, 168, 255, 0.5);
            --glow-secondary: 0 0 15px rgba(0, 210, 211, 0.3);
        }
        
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            height: 100%;
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Rajdhani', 'Segoe UI', 'Roboto', sans-serif;
            background-color: var(--dark-bg);
            color: var(--text-primary);
            line-height: 1.6;
            min-height: 100vh;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 1) 90%),
                linear-gradient(to right, rgba(0, 168, 255, 0.03), transparent, rgba(0, 210, 211, 0.03));
            position: relative;
            overflow-x: hidden;
        }
        
        /* 主容器 */
        .container {
            width: 100%;
            max-width: 1024px;
            margin: 0 auto;
            padding: 0.5rem 0.5rem;
        }
        
        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(90deg, var(--card-bg), var(--dark-bg));
            border-bottom: 1px solid var(--border-color);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
        }
        
        .navbar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            max-width: 1024px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        .navbar-title {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        
        .navbar-title-main {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary);
            text-shadow: var(--glow-primary);
        }
        
        .navbar-title-sub {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-top: 0.25rem;
        }
        
        /* 内容卡片 */
        .content-card {
            background: var(--card-bg);
            border-radius: 1rem;
            padding: 1rem;
            margin-top: 0.6rem;
            box-shadow: 0 8px 32px var(--shadow-color);
            border: 1px solid var(--border-color);
        }
        
        .content-card h2 {
            color: var(--primary);
            margin-bottom: 1.5rem;
            font-size: 1.75rem;
            text-shadow: var(--glow-primary);
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 0.8rem;
            padding: 0.5rem;
            background-color: rgba(255, 255, 255, 0.03);
            border-radius: 0.5rem;
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0.5rem;
            overflow-x: auto;
            min-height: 45px;
        }
        
        /* 两列布局 */
        .form-group.two-column {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .form-column {
            flex: 1;
            min-width: 180px;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0.5rem;
        }
        
        /* 表单项目布局 */
        .form-group,
        .form-column {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .form-group label,
        .form-column label {
            display: inline-block;
            min-width: 60px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: left;
            flex-shrink: 0;
        }
        
        /* 输入框容器 */
        .input-container {
            flex: 1;
            min-width: 0;
        }
        
        .form-group input[type="text"] {
            width: 100%;
            min-width: 0;
            padding: 0.5rem 0.8rem;
            background-color: var(--dark-bg);
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            color: var(--text-primary);
            font-size: 0.9rem;
            vertical-align: middle;
        }
        
        .form-group input[type="text"]:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
        }
        
        /* 按钮样式 */
        .btn {
            min-width: 60px;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 0.5rem;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            vertical-align: middle;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            box-shadow: var(--glow-primary);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 168, 255, 0.4);
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, var(--card-bg), var(--dark-bg));
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }
        
        .btn-secondary:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        
        /* 隐藏文件输入 */
        input[type="file"] {
            display: none;
        }
        
        /* 覆盖层用于阻止页面操作 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 9998;
        }
        
        /* 状态消息弹窗 */
        .status-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 1.5rem;
            border-radius: 0.5rem;
            display: none;
            font-weight: 500;
            min-width: 300px;
            max-width: 90%;
            text-align: center;
            z-index: 9999;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        
        /* 进度条容器 */
        .progress-container {
            margin-top: 1rem;
            height: 6px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            overflow: hidden;
        }
        
        /* 进度条 */
        .progress-bar {
            height: 100%;
            background-color: var(--primary);
            border-radius: 3px;
            transition: width 0.3s ease;
        }
        
        /* 循环动画进度条 */
        .progress-bar.looping {
            width: 30%;
            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
            animation: progressLoop 2s ease-in-out infinite;
            background-size: 200% 100%;
        }
        
        /* 循环动画关键帧 */
        @keyframes progressLoop {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(350%);
            }
        }
        
        .status-message.success {
            background-color: rgba(16, 172, 132, 0.95);
            color: white;
            border: none;
        }
        
        .status-message.error {
            background-color: rgba(238, 90, 36, 0.95);
            color: white;
            border: none;
        }
        
        .status-message.info {
            background-color: rgba(52, 152, 219, 0.95);
            color: white;
            border: none;
        }
        
        /* 返回按钮 */
        .back-btn {
            background: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .back-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        /* 响应式设计 */
        @media (max-width: 720px) {
            .form-group {
                flex-wrap: wrap;
                min-height: auto;
            }
            
            .form-group label {
                width: 100%;
                margin-bottom: 0.5rem;
                text-align: left;
            }
            
            .form-group input[type="text"] {
                width: 100%;
                margin-bottom: 1rem;
            }
            
            .btn {
                width: 100%;
                margin-bottom: 0.5rem;
            }
            
            .form-group.two-column {
                flex-direction: column;
                gap: 1rem;
            }
            
            .form-column {
                width: 100%;
                flex-direction: column;
                align-items: flex-start;
            }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="navbar">
        <div class="navbar-content">
            <div class="navbar-title">
            <div class="navbar-title-main">
                <i class="fa fa-paint-brush"></i> 飞牛桌面管理工具
            </div>
            <div class="navbar-title-sub">个性化定制 - 使用说明：可以上传或者使用图片URL，支持图片API地址</br>注意：保存只是保存配置，要生效需要返回主页点击一次【立即生效】</div>
        </div>
            <a href="index.html" class="back-btn">
                <i class="fa fa-arrow-left"></i> 返回主页
            </a>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="container">
        <div class="content-card">
            <h2><i class="fa fa-sliders"></i> 飞牛个性化设置 <span style="text-shadow:none;color:rgb(202, 154, 51);float:right;font-size:13px;margin-top:20px;">⚠ 为减轻肥牛服务器压力，此项功能仅为非FN Connect连接生效</span></h2>
            
            <form id="customizeForm">
                <!-- 第一行：飞牛标题和登录框透明度 -->
                <div class="form-group two-column">
                    <!-- 飞牛标题 -->
                    <div class="form-column">
                        <label for="appTitle">飞牛标题：</label>
                        <div class="input-container">
                        <input type="text" id="appTitle" placeholder="请输入飞牛标题" />
                    </div>
                    <button type="button" class="btn btn-secondary" id="defaultTitleBtn">
                        <i class="fa fa-refresh"></i> 默认
                    </button>
                        <button type="button" class="btn btn-primary" id="saveTitleBtn">
                            <i class="fa fa-check"></i> 保存
                        </button>
                    </div>
                    <!-- 登录框透明度 -->
                    <div class="form-column">
                        <label for="loginOpacity">登录框透明度：</label>
                        <select id="loginOpacity" style="width: 120px; padding: 0.5rem 0.8rem; background-color: var(--dark-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; color: var(--text-primary); font-size: 0.9rem;">
                            <!-- 透明度选项将在JavaScript中动态生成 -->
                        </select>
                        <button type="button" class="btn btn-primary" id="saveOpacityBtn">
                            <i class="fa fa-check"></i> 保存
                        </button>
                    </div>
                </div>
                
                <!-- 第二行：飞牛登录背景 -->
                <div class="form-group">
                    <label for="loginBackground">飞牛登录背景：</label>
                    <div class="input-container">
                        <input type="text" id="loginBackground" placeholder="请输入背景图片URL" />
                    </div>
                    <button type="button" class="btn btn-secondary" id="defaultBackgroundBtn">
                        <i class="fa fa-refresh"></i> 默认
                    </button>
                    <button type="button" class="btn btn-secondary" id="uploadBackgroundBtn" >
                        <i class="fa fa-upload"></i> 上传
                    </button>
                    <button type="button" class="btn btn-primary" id="saveBackgroundBtn" >
                        <i class="fa fa-check"></i>保存
                    </button>
                    <input type="file" id="backgroundFile" accept="image/*" style="display: none;" />
                </div>
                
                <!-- 第三行：飞牛登录LOGO -->
                <div class="form-group">
                    <label for="loginLogo">飞牛登录LOGO：</label>
                    <div class="input-container">
                        <input type="text" id="loginLogo" placeholder="请输入LOGO图片URL" />
                    </div>
                    <button type="button" class="btn btn-secondary" id="defaultLogoBtn">
                        <i class="fa fa-refresh"></i> 默认
                    </button>
                    <button type="button" class="btn btn-secondary" id="uploadLogoBtn" >
                        <i class="fa fa-upload"></i> 上传
                    </button>
                    <button type="button" class="btn btn-primary" id="saveLogoBtn" >
                            <i class="fa fa-check"></i>保存
                        </button>
                    <input type="file" id="logoFile" accept="image/*" style="display: none;" />
                </div>
                

                
                <!-- 第四行：飞牛设备LOGO -->
                <div class="form-group">
                    <label for="deviceLogo">飞牛设备LOGO：</label>
                    <div class="input-container">
                        <input type="text" id="deviceLogo" placeholder="请输入LOGO图片URL" />
                    </div>
                    <button type="button" class="btn btn-secondary" id="defaultDeviceLogoBtn">
                        <i class="fa fa-refresh"></i> 默认
                    </button>
                    <button type="button" class="btn btn-secondary" id="uploadDeviceLogoBtn">
                        <i class="fa fa-upload"></i> 上传
                    </button>
                    <button type="button" class="btn btn-primary" id="saveDeviceLogoBtn">
                            <i class="fa fa-check"></i> 保存
                        </button>
                    <input type="file" id="deviceLogoFile" accept="image/*" style="display: none;" />
                </div>
                
                <!-- 第五行：飞牛网页favicon图标 -->
                <div class="form-group">
                    <label for="webFavicon">飞牛网页favicon图标：</label>
                    <div class="input-container">
                        <input type="text" id="webFavicon" placeholder="请输入favicon图标URL" />
                    </div>
                    <button type="button" class="btn btn-secondary" id="defaultFaviconBtn">
                        <i class="fa fa-refresh"></i> 默认
                    </button>
                    <button type="button" class="btn btn-secondary" id="uploadFaviconBtn">
                        <i class="fa fa-upload"></i> 上传
                    </button>
                    <button type="button" class="btn btn-primary" id="saveFaviconBtn">
                            <i class="fa fa-check"></i> 保存
                        </button>
                    <input type="file" id="faviconFile" accept="image/x-icon,.ico,.png,.jpg" style="display: none;" />
                </div>
                
                <!-- 第六行：已移除登录框透明度，现在在第一行 -->
            </form>
        </div>
        
        <!-- 独立的预设主题切换区域 -->
        <div class="content-card">
            <div class="card-header">
                <h2><i class="fa fa-paint-brush"></i> 一键切换预设主题 <small style="text-shadow:none;color:rgb(106, 149, 189);float:right;font-size:13px;margin-top:18px;margin-left:10px;"> (个人呢服务器小水管，若下载失败请再尝试)</small></h2>
                <button type="button" class="btn btn-primary" id="updateThemeBtn" style="margin-bottom: 1.1rem;">
                    <i class="fa fa-download"></i> 在线更新主题
                </button>
            </div>
            <div id="themeGrid" class="theme-grid">
                <!-- 主题卡片将通过JavaScript动态生成 -->
                <div class="theme-loading">
                    <i class="fa fa-circle-o-notch fa-spin fa-2x"></i>
                    <p>加载主题中...</p>
                </div>
            </div>
        </div>
        
        <!-- 影视个性化配置区域 -->
        <div class="content-card">
            <h2><i class="fa fa-film"></i> 影视个性化配置 <small style="text-shadow:none;color:rgb(106, 149, 189);float:right;font-size:13px;margin-top:20px;margin-left:10px;"> (影视个性化先看看需求大不大考虑开放)</small></h2>
            
            <form id="movieCustomizeForm">
                <!-- 第一行：影视标题和透明度 -->
                <div class="form-group two-column">
                    <!-- 影视标题 -->
                    <div class="form-column">
                        <label for="movieTitle">影视标题：</label>
                        <div class="input-container">
                        <input type="text" id="movieTitle" placeholder="请输入影视标题" />
                         </div>           
                     <button type="button" class="btn btn-primary" id="saveMovieTitleBtn" disabled>
                            <i class="fa fa-ban"></i> 待解锁
                        </button>
                    </div>
                    <!-- 影视登录框透明度 -->
                    <div class="form-column">
                        <label for="movieOpacity">登录框透明度：</label>
                        <select disabled id="movieOpacity" style="width: 120px; padding: 0.5rem 0.8rem; background-color: var(--dark-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; color: var(--text-primary); font-size: 0.9rem;">
                            <!-- 透明度选项将在JavaScript中动态生成 -->
                        </select>
                        <button type="button" class="btn btn-primary" id="saveMovieOpacityBtn" disabled>
                            <i class="fa fa-ban"></i> 待解锁
                        </button>
                    </div>
                </div>
                
                <!-- 第二行：影视登录背景 -->
                <div class="form-group">
                    <label for="movieBackground">影视背景：</label>
                    <div class="input-container">
                        <input type="text" id="movieBackground" placeholder="请输入背景图片URL" />
                    </div>
                    <button type="button" class="btn btn-secondary" id="uploadMovieBackgroundBtn" disabled>
                        <i class="fa fa-upload"></i> 上传
                    </button>
                    <button type="button" class="btn btn-primary" id="saveMovieBackgroundBtn" disabled>
                            <i class="fa fa-ban"></i> 待解锁
                        </button>
                    <input type="file" id="movieBackgroundFile" accept="image/*" style="display: none;" />
                </div>
                
                <!-- 第三行：影视登录LOGO -->
                <div class="form-group">
                    <label for="movieLogo">影视LOGO：</label>
                    <div class="input-container">
                        <input type="text" id="movieLogo" placeholder="请输入LOGO图片URL" />
                    </div>
                    <button type="button" class="btn btn-secondary" id="uploadMovieLogoBtn" disabled>
                        <i class="fa fa-upload"></i> 上传
                    </button>
                    <button type="button" class="btn btn-primary" id="saveMovieLogoBtn" disabled>
                            <i class="fa fa-ban"></i> 待解锁
                        </button>
                    <input type="file" id="movieLogoFile" accept="image/*" style="display: none;" />
                </div>
                
                <!-- 第三行：影视网页favicon -->
                <div class="form-group">
                    <label for="movieFavicon">影视网页favicon图标：</label>
                    <div class="input-container">
                        <input type="text" id="movieFavicon" placeholder="请输入favicon图标URL" />
                    </div>
                    <button type="button" class="btn btn-secondary" id="uploadMovieFaviconBtn" disabled>
                        <i class="fa fa-upload"></i> 上传
                    </button>
                    <button type="button" class="btn btn-primary" id="saveMovieFaviconBtn" disabled>
                        <i class="fa fa-ban"></i> 待解锁
                    </button>
                    <input type="file" id="movieFaviconFile" accept="image/x-icon,.ico,.png,.jpg" style="display: none;" />
                </div>
            </form>
        </div>
        
        <!-- 覆盖层用于阻止页面操作 -->
        <div id="overlay" class="overlay"></div>
        
        <!-- 状态消息弹窗 -->
        <div id="statusMessage" class="status-message"></div>
    </main>

    <script>
        // 文件上传函数
        function uploadFile(fileInputId, fieldName, inputElementId) {
            const fileInput = document.getElementById(fileInputId);
            const file = fileInput.files[0];
            
            if (!file) {
                showStatusMessage('error', '请选择文件');
                return;
            }
            
            // 创建带循环动画进度条的状态消息
            showStatusMessage('info', '文件上传中...', true);
            
            const formData = new FormData();
            formData.append('file', file);
            
            // 使用XMLHttpRequest替代fetch以支持上传进度
            const xhr = new XMLHttpRequest();
            
            // 请求完成处理
            xhr.onload = function() {
                
                if (xhr.status === 200) {
                    try {
                        const data = JSON.parse(xhr.responseText);
                        if (data.success) {
                            // 在输入框中填入上传后的路径
                            const inputElement = document.getElementById(inputElementId);
                            inputElement.value = data.path;
                            
                            // 自动保存到JSON数据
                            saveToJson(fieldName, data.path)
                                .then(() => {
                                    // 上传成功后显示成功消息，此时会自动隐藏覆盖层
                                    showStatusMessage('success', '文件上传成功并已自动保存到设置');
                                })
                                .catch(() => {
                                    // 即使保存失败，也要提示上传成功
                                    showStatusMessage('success', '文件上传成功，但保存设置失败，请手动点击保存');
                                });
                        } else {
                            showStatusMessage('error', data.error || '文件上传失败');
                        }
                    } catch (e) {
                        showStatusMessage('error', '文件上传响应解析失败');
                    }
                } else {
                    showStatusMessage('error', `文件上传失败 (HTTP ${xhr.status})`);
                }
            };
            
            // 请求错误处理
            xhr.onerror = function() {
                console.error('上传错误');
                showStatusMessage('error', '网络错误，文件上传失败');
            };
            
            // 发送请求
            xhr.open('POST', `/api/upload/${fieldName}`);
            xhr.setRequestHeader('x-auth-token', localStorage.getItem('authToken'));
            xhr.send(formData);
        }
        
            
        // 注意：文件选择事件已在initFnStyleEvents和initMovieStyleEvents函数中绑定
        // 这里不再重复绑定，避免事件冲突
        
        // 检查登录状态 - 添加30分钟过期机制
        function checkLoginStatus() {
            const authToken = localStorage.getItem('authToken');
            const loginTimestamp = localStorage.getItem('loginTimestamp');
            const thirtyMinutes = 30 * 60 * 1000; // 30分钟，以毫秒为单位
            const currentTime = new Date().getTime();
            
            // 检查是否已登录且未过期
            if (!authToken || !loginTimestamp || (currentTime - parseInt(loginTimestamp)) > thirtyMinutes) {
                // 登录已过期或未登录，清除登录信息并重定向到登录页
                localStorage.removeItem('authToken');
                localStorage.removeItem('loginTimestamp');
                window.location.href = 'login.html';
                return false;
            }
            
            // 登录有效，更新登录状态
            localStorage.setItem('authToken', 'authenticated');
            localStorage.setItem('loginTimestamp', currentTime.toString());
            return true;
        }
        
        // 页面加载时检查登录状态
        document.addEventListener('DOMContentLoaded', function() {
            if (!checkLoginStatus()) {
                return;
            }
            
            // 确保所有API请求都包含认证头
            const originalFetch = window.fetch;
            window.fetch = function(url, options = {}) {
                if (url.startsWith('/api/')) {
                    const authToken = localStorage.getItem('authToken');
                    if (authToken) {
                        if (!options.headers) {
                            options.headers = {};
                        }
                        options.headers['X-Auth-Token'] = authToken;
                    }
                }
                
                // 处理响应
                return originalFetch(url, options).then(response => {
                    // 如果响应是401未授权，重定向到登录页面
                    if (response.status === 401) {
                        localStorage.removeItem('authToken');
                        window.location.href = 'login.html';
                    }
                    return response;
                });
            };
            
            // 初始化表单事件
            initializeFormEvents();
            
            // 加载当前设置
            loadCurrentSettings();
        });
        
        // 初始化表单事件
        function initializeFormEvents() {
            // 初始化透明度下拉列表
            initializeOpacityDropdown();
            
            // 飞牛配置相关事件
            initFnStyleEvents();
            
            // 影视配置相关事件
            initMovieStyleEvents();
        }
        
        // 初始化飞牛配置事件
        function initFnStyleEvents() {
            // 飞牛标题相关事件
            document.getElementById('saveTitleBtn').addEventListener('click', function() {
                saveAppTitle();
            });
            
            // 飞牛网页favicon图标相关事件
            document.getElementById('uploadFaviconBtn').addEventListener('click', function() {
                document.getElementById('faviconFile').click();
            });
            
            document.getElementById('faviconFile').addEventListener('change', function() {
                uploadFile('faviconFile', 'webFavicon', 'webFavicon');
            });
            
            document.getElementById('saveFaviconBtn').addEventListener('click', function() {
                saveWebFavicon();
            });
            
            // 登录背景相关事件
            document.getElementById('uploadBackgroundBtn').addEventListener('click', function() {
                document.getElementById('backgroundFile').click();
            });
            
            document.getElementById('backgroundFile').addEventListener('change', function() {
                uploadFile('backgroundFile', 'loginBackground', 'loginBackground');
            });
            
            document.getElementById('saveBackgroundBtn').addEventListener('click', function() {
                saveLoginBackground();
            });
            
            // 登录LOGO相关事件
            document.getElementById('uploadLogoBtn').addEventListener('click', function() {
                document.getElementById('logoFile').click();
            });
            
            document.getElementById('logoFile').addEventListener('change', function() {
                uploadFile('logoFile', 'loginLogo', 'loginLogo');
            });
            
            document.getElementById('saveLogoBtn').addEventListener('click', function() {
                saveLoginLogo();
            });
            
            // 设备LOGO相关事件
            document.getElementById('uploadDeviceLogoBtn').addEventListener('click', function() {
                document.getElementById('deviceLogoFile').click();
            });
            
            document.getElementById('deviceLogoFile').addEventListener('change', function() {
                uploadFile('deviceLogoFile', 'deviceLogo', 'deviceLogo');
            });
            
            document.getElementById('saveDeviceLogoBtn').addEventListener('click', function() {
                saveDeviceLogo();
            });
            
            // 登录框透明度相关事件
            document.getElementById('saveOpacityBtn').addEventListener('click', function() {
                saveLoginOpacity();
            });
            
            // 飞牛标题默认按钮事件
            document.getElementById('defaultTitleBtn').addEventListener('click', function() {
                document.getElementById('appTitle').value = '飞牛 fnOS';
            });
            
            // 飞牛登录背景默认按钮事件
            document.getElementById('defaultBackgroundBtn').addEventListener('click', function() {
                document.getElementById('loginBackground').value = '/static/bg/wallpaper-1.webp';
            });
            
            // 飞牛登录LOGO默认按钮事件
            document.getElementById('defaultLogoBtn').addEventListener('click', function() {
                document.getElementById('loginLogo').value = "data:image/svg+xml,%3csvg%20width='80'%20height='62'%20viewBox='0%200%2080%2062'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M71.7976%200C71.7976%200%2075.7039%207.62011%2073.9143%2012.0592C72.9983%2014.3316%2070.3423%2017.0402%2067.4317%2017.0402H29.3047C23.8248%2017.0402%2019.3824%2021.4416%2019.3824%2026.871V54.5285C19.3824%2058.6549%2022.7586%2062%2026.9234%2062H37.302C40.0054%2062%2042.197%2059.8286%2042.197%2057.1501V50.7825H49.3583C52.0618%2050.7825%2054.2534%2048.6111%2054.2534%2045.9326V40.3721C60.4044%2040.3721%2066.2097%2037.5272%2069.9786%2032.666L70.3048%2032.2452H50.9459C48.2425%2032.2452%2046.0509%2034.4166%2046.0509%2037.0951V41.5972C46.0509%2042.1818%2045.577%2042.6556%2044.9925%2042.6556H38.8896C36.1861%2042.6556%2033.9945%2044.827%2033.9945%2047.5055V51.9695C33.9945%2053.0209%2033.1422%2053.8731%2032.0909%2053.8731H29.4885C28.4372%2053.8731%2027.5849%2053.0209%2027.5849%2051.9695V26.871C27.5849%2025.9299%2028.3549%2025.167%2029.3047%2025.167H70.0777C75.5577%2025.167%2080.0001%2020.7656%2080.0001%2015.3362C80.0001%2010.4052%2077.9446%205.69738%2074.3281%202.34542L71.7976%200ZM6.08573%2012.0965C4.29615%207.65745%208.2025%200.0373473%208.2025%200.0373473L5.67199%202.38276C2.05551%205.73472%200%2010.4425%200%2015.3735C0%2020.8029%204.4424%2025.2044%209.92237%2025.2044H12.3468C12.3657%2022.0411%2013.5657%2019.1578%2015.528%2016.9731C9.05215%2016.4551%206.89556%2014.1053%206.08573%2012.0965Z'%20fill='white'/%3e%3c/svg%3e";
            });
            
            // 飞牛设备LOGO默认按钮事件
            document.getElementById('defaultDeviceLogoBtn').addEventListener('click', function() {
                document.getElementById('deviceLogo').value = "";
            });
            
            // 飞牛网页favicon图标默认按钮事件
            document.getElementById('defaultFaviconBtn').addEventListener('click', function() {
                document.getElementById('webFavicon').value = '/favicon.ico';
            });
        }
        
        // 初始化影视配置事件
        function initMovieStyleEvents() {
            // 影视标题相关事件
            document.getElementById('saveMovieTitleBtn').addEventListener('click', function() {
                saveMovieTitle();
            });
            
            // 影视网页favicon图标相关事件
            document.getElementById('uploadMovieFaviconBtn').addEventListener('click', function() {
                document.getElementById('movieFaviconFile').click();
            });
            
            document.getElementById('movieFaviconFile').addEventListener('change', function() {
                uploadFile('movieFaviconFile', 'movieFavicon', 'movieFavicon');
            });
            
            document.getElementById('saveMovieFaviconBtn').addEventListener('click', function() {
                saveMovieFavicon();
            });
            
            // 影视背景相关事件
            document.getElementById('uploadMovieBackgroundBtn').addEventListener('click', function() {
                document.getElementById('movieBackgroundFile').click();
            });
            
            document.getElementById('movieBackgroundFile').addEventListener('change', function() {
                uploadFile('movieBackgroundFile', 'movieBackground', 'movieBackground');
            });
            
            document.getElementById('saveMovieBackgroundBtn').addEventListener('click', function() {
                saveMovieBackground();
            });
            
            // 影视LOGO相关事件
            document.getElementById('uploadMovieLogoBtn').addEventListener('click', function() {
                document.getElementById('movieLogoFile').click();
            });
            
            document.getElementById('movieLogoFile').addEventListener('change', function() {
                uploadFile('movieLogoFile', 'movieLogo', 'movieLogo');
            });
            
            document.getElementById('saveMovieLogoBtn').addEventListener('click', function() {
                saveMovieLogo();
            });
            
            // 影视内容透明度相关事件
            document.getElementById('saveMovieOpacityBtn').addEventListener('click', function() {
                saveMovieOpacity();
            });
        }
        
        // 加载当前设置 - 直接从server.js提供的API读取
        function loadCurrentSettings() {
            try {
                // 从服务器API加载数据 ()
                fetch('api/fnstyle.json')
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('网络响应错误');
                        }
                        return response.json();
                    })
                    .then(data => {
                        // 设置表单值
                        // 飞牛配置
                        if (data.appTitle) document.getElementById('appTitle').value = data.appTitle;
                        if (data.webFavicon) document.getElementById('webFavicon').value = data.webFavicon;
                        if (data.loginBackground) document.getElementById('loginBackground').value = data.loginBackground;
                        if (data.loginLogo) document.getElementById('loginLogo').value = data.loginLogo;
                        if (data.deviceLogo) document.getElementById('deviceLogo').value = data.deviceLogo;
                        if (data.loginOpacity) document.getElementById('loginOpacity').value = data.loginOpacity;
                        else document.getElementById('loginOpacity').value = '30'; // 默认值改为30
                        
                        // 影视配置
                        if (data.movieTitle) document.getElementById('movieTitle').value = data.movieTitle;
                        if (data.movieFavicon) document.getElementById('movieFavicon').value = data.movieFavicon;
                        if (data.movieBackground) document.getElementById('movieBackground').value = data.movieBackground;
                        if (data.movieLogo) document.getElementById('movieLogo').value = data.movieLogo;
                        if (data.movieOpacity) document.getElementById('movieOpacity').value = data.movieOpacity;
                        else document.getElementById('movieOpacity').value = '30'; // 默认值改为30
                        
                        showStatusMessage('info', '主题配置加载完成');
                    })
                    .catch(error => {
                        console.error('加载设置失败:', error);
                        showStatusMessage('error', '加载设置失败');
                    });
            } catch (error) {
                console.error('加载设置失败:', error);
                showStatusMessage('error', '加载设置失败');
            }
        }
        
        // 保存设置到服务器API，直接更新fnstyle.json文件
        function saveToJson(field, value) {
            // 构建要发送的数据
            const dataToSend = { [field]: value };
            
            // 发送POST请求到服务器API ()
            return fetch('api/fnstyle.json', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(dataToSend)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.json();
            })
            .then(result => {
                console.log(`设置已直接保存到fnstyle.json文件: ${field} = ${value}`);
                return result.data;
            })
            .catch(error => {
                console.error('保存设置失败:', error);
                throw new Error('保存设置失败');
            });
        }
        
        // 保存登录背景设置
        function saveLoginBackground() {
            const backgroundUrl = document.getElementById('loginBackground').value.trim();
            
            if (!backgroundUrl) {
                showStatusMessage('error', '请输入背景图片URL或选择文件');
                return;
            }
            
            // 显示保存中提示和覆盖层
            showStatusMessage('info', '保存中...', true, 50);
            
            saveToJson('loginBackground', backgroundUrl)
                .then(() => {
                    // 如果有文件，这里可以添加上传逻辑
                    const fileInput = document.getElementById('backgroundFile');
                    if (fileInput.files && fileInput.files[0]) {
                        // 模拟文件上传
                        console.log('需要上传文件:', fileInput.files[0]);
                        // 实际项目中这里应该调用上传API
                    }
                    
                    showStatusMessage('success', '登录背景设置已保存');
                })
                .catch(error => {
                    console.error('保存设置失败:', error);
                    showStatusMessage('error', '保存设置失败');
                });
        }
        
        // 保存登录LOGO设置
        function saveLoginLogo() {
            const logoUrl = document.getElementById('loginLogo').value.trim();
            
            if (!logoUrl) {
                showStatusMessage('error', '请输入LOGO图片URL或选择文件');
                return;
            }
            
            // 显示保存中提示和覆盖层
            showStatusMessage('info', '保存中...', true, 50);
            
            saveToJson('loginLogo', logoUrl)
                .then(() => {
                    // 如果有文件，这里可以添加上传逻辑
                    const fileInput = document.getElementById('logoFile');
                    if (fileInput.files && fileInput.files[0]) {
                        // 模拟文件上传
                        console.log('需要上传LOGO文件:', fileInput.files[0]);
                        // 实际项目中这里应该调用上传API
                    }
                    
                    showStatusMessage('success', '登录LOGO设置已保存');
                })
                .catch(error => {
                    console.error('保存LOGO设置失败:', error);
                    showStatusMessage('error', '保存LOGO设置失败');
                });
        }
        
        // 保存设备LOGO设置
        function saveDeviceLogo() {
            const logoUrl = document.getElementById('deviceLogo').value.trim();
            
            if (!logoUrl) {
                showStatusMessage('error', '请输入设备LOGO图片URL或选择文件');
                return;
            }
            
            // 显示保存中提示和覆盖层
            showStatusMessage('info', '保存中...', true, 50);
            
            saveToJson('deviceLogo', logoUrl)
                .then(() => {
                    // 如果有文件，这里可以添加上传逻辑
                    const fileInput = document.getElementById('deviceLogoFile');
                    if (fileInput.files && fileInput.files[0]) {
                        // 模拟文件上传
                        console.log('需要上传设备LOGO文件:', fileInput.files[0]);
                        // 实际项目中这里应该调用上传API
                    }
                    
                    showStatusMessage('success', '设备LOGO设置已保存');
                })
                .catch(error => {
                    console.error('保存设备LOGO设置失败:', error);
                    showStatusMessage('error', '保存设备LOGO设置失败');
                });
        }
        
        // 保存飞牛标题设置
        function saveAppTitle() {
            const title = document.getElementById('appTitle').value.trim();
            
            if (!title) {
                showStatusMessage('error', '请输入飞牛标题');
                return;
            }
            
            // 显示保存中提示和覆盖层
            showStatusMessage('info', '保存中...', true, 50);
            
            saveToJson('appTitle', title)
                .then(() => {
                    showStatusMessage('success', '飞牛标题设置已保存');
                })
                .catch(error => {
                    console.error('保存标题设置失败:', error);
                    showStatusMessage('error', '保存标题设置失败');
                });
        }
        
        // 保存飞牛网页favicon图标设置
        function saveWebFavicon() {
            const faviconUrl = document.getElementById('webFavicon').value.trim();
            
            if (!faviconUrl) {
                showStatusMessage('error', '请输入favicon图标URL或选择文件');
                return;
            }
            
            // 显示保存中提示和覆盖层
            showStatusMessage('info', '保存中...', true, 50);
            
            saveToJson('webFavicon', faviconUrl)
                .then(() => {
                    // 如果有文件，这里可以添加上传逻辑
                    const fileInput = document.getElementById('faviconFile');
                    if (fileInput.files && fileInput.files[0]) {
                        // 模拟文件上传
                        console.log('需要上传favicon文件:', fileInput.files[0]);
                        // 实际项目中这里应该调用上传API
                    }
                    
                    showStatusMessage('success', '网页favicon图标设置已保存');
                })
                .catch(error => {
                    console.error('保存favicon设置失败:', error);
                    showStatusMessage('error', '保存favicon设置失败');
                });
        }
        
        // 保存登录框透明度设置
        function saveLoginOpacity() {
            const opacity = document.getElementById('loginOpacity').value;
            const opacityValue = parseFloat(opacity);
            
            // 因为是下拉列表，这里可以简化验证
            if (isNaN(opacityValue) || opacityValue < 0 || opacityValue > 30) {
                showStatusMessage('error', '无效的透明度值');
                return;
            }
            
            // 显示保存中提示和覆盖层
            showStatusMessage('info', '保存中...', true, 50);
            
            saveToJson('loginOpacity', opacityValue.toString())
                .then(() => {
                    showStatusMessage('success', '登录框透明度设置已保存');
                })
                .catch(error => {
                    console.error('保存透明度设置失败:', error);
                    showStatusMessage('error', '保存透明度设置失败');
                });
        }
        
        // 保存影视标题设置
        function saveMovieTitle() {
            const title = document.getElementById('movieTitle').value.trim();
            
            if (!title) {
                showStatusMessage('error', '请输入影视标题');
                return;
            }
            
            // 显示保存中提示和覆盖层
            showStatusMessage('info', '保存中...', true, 50);
            
            saveToJson('movieTitle', title)
                .then(() => {
                    showStatusMessage('success', '影视标题设置已保存');
                })
                .catch(error => {
                    console.error('保存影视标题设置失败:', error);
                    showStatusMessage('error', '保存影视标题设置失败');
                });
        }
        
        // 保存影视网页favicon图标设置
        function saveMovieFavicon() {
            const faviconUrl = document.getElementById('movieFavicon').value.trim();
            
            if (!faviconUrl) {
                showStatusMessage('error', '请输入favicon图标URL或选择文件');
                return;
            }
            
            // 显示保存中提示和覆盖层
            showStatusMessage('info', '保存中...', true, 50);
            
            saveToJson('movieFavicon', faviconUrl)
                .then(() => {
                    // 如果有文件，这里可以添加上传逻辑
                    const fileInput = document.getElementById('movieFaviconFile');
                    if (fileInput.files && fileInput.files[0]) {
                        // 模拟文件上传
                        console.log('需要上传影视favicon文件:', fileInput.files[0]);
                        // 实际项目中这里应该调用上传API
                    }
                    
                    showStatusMessage('success', '影视网页favicon图标设置已保存');
                })
                .catch(error => {
                    console.error('保存影视favicon设置失败:', error);
                    showStatusMessage('error', '保存影视favicon设置失败');
                });
        }
        
        // 保存影视背景设置
        function saveMovieBackground() {
            const backgroundUrl = document.getElementById('movieBackground').value.trim();
            
            if (!backgroundUrl) {
                showStatusMessage('error', '请输入背景图片URL或选择文件');
                return;
            }
            
            // 显示保存中提示和覆盖层
            showStatusMessage('info', '保存中...', true, 50);
            
            saveToJson('movieBackground', backgroundUrl)
                .then(() => {
                    // 如果有文件，这里可以添加上传逻辑
                    const fileInput = document.getElementById('movieBackgroundFile');
                    if (fileInput.files && fileInput.files[0]) {
                        // 模拟文件上传
                        console.log('需要上传影视背景文件:', fileInput.files[0]);
                        // 实际项目中这里应该调用上传API
                    }
                    
                    showStatusMessage('success', '影视背景设置已保存');
                })
                .catch(error => {
                    console.error('保存影视背景设置失败:', error);
                    showStatusMessage('error', '保存影视背景设置失败');
                });
        }
        
        // 保存影视LOGO设置
        function saveMovieLogo() {
            const logoUrl = document.getElementById('movieLogo').value.trim();
            
            if (!logoUrl) {
                showStatusMessage('error', '请输入LOGO图片URL或选择文件');
                return;
            }
            
            // 显示保存中提示和覆盖层
            showStatusMessage('info', '保存中...', true, 50);
            
            saveToJson('movieLogo', logoUrl)
                .then(() => {
                    // 如果有文件，这里可以添加上传逻辑
                    const fileInput = document.getElementById('movieLogoFile');
                    if (fileInput.files && fileInput.files[0]) {
                        // 模拟文件上传
                        console.log('需要上传影视LOGO文件:', fileInput.files[0]);
                        // 实际项目中这里应该调用上传API
                    }
                    
                    showStatusMessage('success', '影视LOGO设置已保存');
                })
                .catch(error => {
                    console.error('保存影视LOGO设置失败:', error);
                    showStatusMessage('error', '保存影视LOGO设置失败');
                });
        }
        
        // 保存影视内容透明度设置
        function saveMovieOpacity() {
            const opacity = document.getElementById('movieOpacity').value;
            const opacityValue = parseFloat(opacity);
            
            // 因为是下拉列表，这里可以简化验证
            if (isNaN(opacityValue) || opacityValue < 0 || opacityValue > 30) {
                showStatusMessage('error', '无效的透明度值');
                return;
            }
            
            // 显示保存中提示和覆盖层
            showStatusMessage('info', '保存中...', true, 50);
            
            saveToJson('movieOpacity', opacityValue.toString())
                .then(() => {
                    showStatusMessage('success', '内容透明度设置已保存');
                })
                .catch(error => {
                    console.error('保存透明度设置失败:', error);
                    showStatusMessage('error', '保存透明度设置失败');
                });
        }
        
        // 显示状态消息，支持循环动画进度条和覆盖层
        function showStatusMessage(type, message, showProgress = false) {
            const statusElement = document.getElementById('statusMessage');
            const overlay = document.getElementById('overlay');
            
            // 设置消息内容
            let content = `<i class="fa fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i> ${message}`;
            
            // 如果需要显示进度条，添加循环动画进度条HTML
            if (showProgress) {
                content += `
                    <div class="progress-container">
                        <div class="progress-bar looping"></div>
                    </div>
                `;
            }
            
            statusElement.innerHTML = content;
            
            // 移除所有状态类
            statusElement.classList.remove('success', 'error', 'info');
            
            // 添加指定的状态类
            statusElement.classList.add(type);
            
            // 显示消息弹窗和覆盖层
            statusElement.style.display = 'block';
            
            // 根据消息类型决定是否显示覆盖层
            // 显示进度条的info消息（如上传中）或正在进行的操作需要显示覆盖层
            if (showProgress || type === 'info') {
                overlay.style.display = 'block';
            }
            
            // 3秒后自动隐藏消息和覆盖层（不包括info类型的进度条消息）
            if ((type !== 'info' || !showProgress)) {
                overlay.style.display = 'none';    
                setTimeout(() => {
                    statusElement.style.display = 'none';   
                }, 3000);
            }
        }
        
        // 隐藏状态消息和覆盖层（用于手动关闭）
        function hideStatusMessage() {
            const statusElement = document.getElementById('statusMessage');
            const overlay = document.getElementById('overlay');
            
            statusElement.style.display = 'none';
            overlay.style.display = 'none';
        }
        
        // 初始化透明度下拉列表
        function initializeOpacityDropdown() {
            // 初始化飞牛登录框透明度
            initializeOpacitySelect('loginOpacity', 'saveOpacityBtn', 'loginOpacity', '登录框透明度设置已保存', '保存透明度设置失败');
            
            // 初始化影视内容透明度
            initializeOpacitySelect('movieOpacity', 'saveMovieOpacityBtn', 'movieOpacity', '内容透明度设置已保存', '保存透明度设置失败');
        }
        
        // 通用透明度下拉列表初始化函数
        function initializeOpacitySelect(selectId, btnId, jsonKey, successMsg, errorMsg) {
            const select = document.getElementById(selectId);
            
            // 清空现有选项
            select.innerHTML = '';
            
            // 生成0-30的选项
            for (let i = 0; i <= 30; i++) {
                const option = document.createElement('option');
                option.value = i;
                option.textContent = i;
                select.appendChild(option);
            }
            
            // 添加change事件监听器，选择后自动保存
            select.addEventListener('change', function() {
                const opacityValue = this.value;
                
                // 显示加载状态
                const saveBtn = document.getElementById(btnId);
                const originalText = saveBtn.innerHTML;
                saveBtn.disabled = true;
                saveBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 保存中...';
                
                
                saveToJson(jsonKey, opacityValue)
                    .then(() => {
                        showStatusMessage('success', successMsg);
                    })
                    .catch(error => {
                        console.error(errorMsg + ':', error);
                        showStatusMessage('error', errorMsg);
                    })
                    .finally(() => {
                        // 重置按钮状态
                        saveBtn.innerHTML = '<i class="fa fa-check"></i> 保存';
                        saveBtn.disabled = false;
                    });
            });
        }
        
        // 加载并显示预设主题
        function loadThemes() {
            const themeGrid = document.getElementById('themeGrid');
            
            // 模拟主题缩略图（因为实际图片可能不存在）
            const fallbackThumbnails = {
                1: 'linear-gradient(45deg, #ff0055, #00ffff)',
                2: 'linear-gradient(45deg, #00a8ff, #00d2d3)',
                3: 'linear-gradient(45deg, #9c27b0, #673ab7)',
                4: 'linear-gradient(45deg, #4caf50, #8bc34a)',
                5: 'linear-gradient(45deg, #ff9800, #ff5722)',
                6: 'linear-gradient(45deg, #1976d2, #00bcd4)'
            };
            
            fetch('deskdata/theme.json')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('主题数据加载失败');
                    }
                    return response.json();
                })
                .then(themes => {
                    // 清空加载状态
                    themeGrid.innerHTML = '';
                    
                    // 按ID降序排序主题
                    themes.sort((a, b) => b.ID - a.ID);
                    
                    // 创建主题卡片
                    themes.forEach(theme => {
                        const themeCard = document.createElement('div');
                        themeCard.className = 'theme-card';
                        themeCard.dataset.themeId = theme.ID;
                        
                        // 创建缩略图容器
                        const thumbnailContainer = document.createElement('div');
                        thumbnailContainer.className = 'theme-thumbnail';
                        // 使用t0作为背景图片
                        thumbnailContainer.style.backgroundImage = `url(${theme.t0.replace(/[`']/g, '')})`;
                        
                        // 创建叠加的t1图片
                        const overlayImage = document.createElement('div');
                        overlayImage.className = 'theme-overlay-image';
                        overlayImage.style.backgroundImage = `url(${theme.t1.replace(/[`']/g, '')})`;
                        thumbnailContainer.appendChild(overlayImage);
                        
                        // 创建选择按钮（包含标题）
                        const selectBtn = document.createElement('button');
                        selectBtn.className = 'btn btn-primary theme-select-btn';
                        selectBtn.innerHTML = `<div class="theme-btn-content">
                            <span class="theme-btn-title">${theme.标题}</span>
                            <span class="theme-btn-action"><i class="fa fa-check"></i> 选择</span>
                        </div>`;
                        
                        // 组装卡片
                        themeCard.appendChild(thumbnailContainer);
                        themeCard.appendChild(selectBtn);
                        
                        // 添加到网格
                        themeGrid.appendChild(themeCard);
                });
                
                // 初始化主题按钮事件
                initThemeButtons();
            })
            .catch(error => {
                    console.error('加载主题失败:', error);
                    themeGrid.innerHTML = `
                        <div class="theme-error">
                            <i class="fa fa-exclamation-triangle text-danger"></i>
                            <p>暂无任何主题数据...</p>
                        </div>
                    `;
                });
        }
        
        // 显示通知消息
        function showNotification(message, type = 'info') {
            // 检查是否已有通知容器
            let notificationContainer = document.getElementById('notification-container');
            if (!notificationContainer) {
                notificationContainer = document.createElement('div');
                notificationContainer.id = 'notification-container';
                notificationContainer.style.position = 'fixed';
                notificationContainer.style.top = '20px';
                notificationContainer.style.right = '20px';
                notificationContainer.style.zIndex = '9999';
                notificationContainer.style.maxWidth = '300px';
                document.body.appendChild(notificationContainer);
            }
            
            // 创建通知元素
            const notification = document.createElement('div');
            notification.className = 'alert';
            
            // 设置样式
            notification.style.padding = '12px 16px';
            notification.style.marginBottom = '10px';
            notification.style.borderRadius = '4px';
            notification.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.15)';
            notification.style.transition = 'all 0.3s ease';
            notification.style.opacity = '0';
            notification.style.transform = 'translateY(-10px)';
            
            // 根据类型设置样式
            switch (type) {
                case 'success':
                    notification.style.backgroundColor = '#d4edda';
                    notification.style.color = '#155724';
                    notification.style.borderLeft = '4px solid #28a745';
                    break;
                case 'error':
                    notification.style.backgroundColor = '#f8d7da';
                    notification.style.color = '#721c24';
                    notification.style.borderLeft = '4px solid #dc3545';
                    break;
                case 'warning':
                    notification.style.backgroundColor = '#fff3cd';
                    notification.style.color = '#856404';
                    notification.style.borderLeft = '4px solid #ffc107';
                    break;
                default:
                    notification.style.backgroundColor = '#d1ecf1';
                    notification.style.color = '#0c5460';
                    notification.style.borderLeft = '4px solid #17a2b8';
            }
            
            notification.textContent = message;
            notificationContainer.appendChild(notification);
            
            // 显示通知
            setTimeout(() => {
                notification.style.opacity = '1';
                notification.style.transform = 'translateY(0)';
            }, 10);
            
            // 自动关闭
            setTimeout(() => {
                notification.style.opacity = '0';
                notification.style.transform = 'translateY(-10px)';
                setTimeout(() => {
                    if (notificationContainer.contains(notification)) {
                        notificationContainer.removeChild(notification);
                    }
                }, 300);
            }, 3000);
        }
        
        // 下载并更新主题配置文件
        function updateThemeFile() {
            // 固定的主题配置文件URL - 用户可以在此修改URL
            const THEME_CONFIG_URL = 'https://sh.on79.cfd/fndesk_theme.json'; // 请修改为实际的主题配置文件URL#########################################################################################################
            
            const updateThemeBtn = document.getElementById('updateThemeBtn');
            const originalText = updateThemeBtn.innerHTML;
            
            // 验证URL格式
            try {
                new URL(THEME_CONFIG_URL);
            } catch (e) {
                showNotification('主题配置URL格式无效，请检查代码中的THEME_CONFIG_URL变量', 'error');
                return;
            }
            
            // 显示加载状态
            updateThemeBtn.innerHTML = '<i class="fa fa-circle-o-notch fa-spin"></i> 下载中...';
            updateThemeBtn.disabled = true;
            
            // 调用API下载更新主题文件
            fetch('/api/update-theme-file', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ themeUrl: THEME_CONFIG_URL })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`服务器响应错误: ${response.status}`);
                }
                return response.json();
            })
            .then(result => {
                if (result.success) {
                    showNotification('主题配置文件更新成功！', 'success');
                    // 重新加载主题
                    setTimeout(() => {
                        loadThemes();
                    }, 500);
                } else {
                    showNotification(result.message || '更新失败', 'error');
                }
            })
            .catch(error => {
                console.error('更新主题文件失败:', error);
                showNotification('下载更新失败: ' + (error.message || '未知错误'), 'error');
            })
            .finally(() => {
                // 恢复按钮状态
                updateThemeBtn.innerHTML = originalText;
                updateThemeBtn.disabled = false;
            });
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查是否存在loadSavedSettings函数
            if (typeof loadSavedSettings === 'function') {
                loadSavedSettings();
            }
            // 检查是否存在initializeOpacityDropdown函数
            if (typeof initializeOpacityDropdown === 'function') {
                initializeOpacityDropdown();
            }
            loadThemes(); // 加载预设主题
            
            // 连接下载按钮点击事件
            const updateThemeBtn = document.getElementById('updateThemeBtn');
            if (updateThemeBtn) {
                updateThemeBtn.addEventListener('click', updateThemeFile);
            }
        });
    </script>
    
    <!-- 主题卡片样式 -->
    <style>
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0rem;
        }
        
        .theme-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 1.5rem;
        }
        
        .theme-card {
            background-color: #0d1b2a;
            border: 1px solid #4a5568;
            border-radius: 0.75rem;
            overflow: hidden;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }
        
        .theme-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 15px rgba(124, 58, 237, 0.5), 0 6px 12px rgba(0, 0, 0, 0.3);
            border-color: #8b5cf6;
        }
        
        .theme-thumbnail {
            height: 140px;
            width: 100%;
            background-size: cover;
            background-position: center;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.75rem 0.75rem 0 0;
        }
        
        .theme-thumbnail::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }
        
        .theme-overlay-image {
            position: relative;
            width: 60%;
            height: 60%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
            z-index: 2;
        }
        
        .theme-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0.75rem;
            text-align: center;
        }
        
        .theme-select-btn {
            margin: 0;
            padding: 0.75rem;
            font-size: 0.9rem;
            border-radius: 0 0 0.75rem 0.75rem;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            border: none;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: left;
            width: 100%;
            display: block;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .theme-btn-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }
        
        .theme-btn-title {
            font-weight: bold;
            margin-right: 0.5rem;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .theme-btn-action {
            white-space: nowrap;
            display: flex;
            align-items: center;
        }
        
        .theme-btn-action i {
            margin-right: 0.25rem;
        }
        
        .theme-select-btn:hover {
            box-shadow: var(--glow-primary);
            transform: scale(1.05);
        }
        
        .theme-loading, .theme-error {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem;
            color: var(--text-secondary);
        }
        
        .theme-loading i, .theme-error i {
            margin-bottom: 1rem;
        }
    </style>
    <script src="applyTheme.js"></script>
</body>
</html>